<template>
  <div >
    <el-container class="home-container" >
         <el-header class="home-header TextVcenter2" style="background-color: #41494f;">
              <span style="color: #00e2e2;font-size: x-large;margin-left: 50px;margin-top: -10px;font-weight: 500;">客户管理系统</span>
               <p style="color: white;"><i class="el-icon-cloudy"></i>{{weather.cityInfo.city}} {{weather.data.wendu}} °C</p>
              <el-tooltip placement="bottom">
                 <div slot="content" v-if="hasLogin">当前账号：{{this.$store.state.userInfo.name}}<br/><br/>
                      <div class="right"><el-button size='mini' type="danger" v-on:click="logout">注销</el-button></div> </div>
                 <div slot="content" v-else>未登录,点击登录</div>
                 <div style="margin-right: 30px;"  class='head' @click="showlogin">
                   <el-badge is-dot type="success" :hidden="!this.$store.state.hasLogin">
                     <el-avatar :size="40" style='background-color: #1daeec;' >{{this.$store.state.userInfo.name}}</el-avatar>
                   </el-badge>
                 </div>
              </el-tooltip>
         </el-header>

         <el-container>
           <el-aside width="230px" class="home-aside" style="background-color:#545c64;">

               <el-menu style="width: 230px;" :default-active="$router.path" class="el-menu-vertical-demo left noneBoder"

                   @open="handleOpen" @close="handleClose" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <div  style="margin-top: 20px;" ></div>

                      <template v-for="item in navs" >
                      <el-submenu v-if="item.children" :index="item.path" :key='item.path'>
                              <template slot="title">
                                <i style="margin-left: 20px;" :class="item.icon" ></i>
                                <span slot="title">{{item.name}}</span>
                              </template>
                              <template v-for="(itemC,i) in item.children">
                                <el-menu-item   :key='i' :index="itemC.path">
                                  <i style="margin-left: 20px;" :class="itemC.icon" ></i>
                                  <span slot="title">{{itemC.name}}</span>
                                </el-menu-item>
                              </template>
                      </el-submenu>

                      <el-menu-item v-else :index="item.path" :key='item.path'>
                            <i style="margin-left: 20px;" :class="item.icon" ></i>
                            <span slot="title">{{item.name}}</span>
                      </el-menu-item>
                      </template>


               </el-menu>

           </el-aside>

           <el-main class="mp0">
             <el-breadcrumb   style="height: 40px;padding-left: 20px; background-color: #f3f3f3;" class="TextVcenter3" separator-class="el-icon-arrow-right">
               <el-breadcrumb-item :to="{ path: '/' }">系统</el-breadcrumb-item>
               <el-breadcrumb-item  v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
             </el-breadcrumb>
             <div v-if="this.$router.currentRoute.path=='/'"  style="width: 100%;">
              <el-carousel height='480px' indicator-position="outside">
                  <el-carousel-item v-for="item in imgs" :key="item">
                    <img src="../assets/img/1.png" />
                  </el-carousel-item>
                </el-carousel>
                <img style="width: 1000px;" src="../assets/img/foot.png"/>
             </div>

             <router-view></router-view>
           </el-main>

         </el-container>
       </el-container>
  </div>
</template>

<script>
import { getDate, getTime } from '../assets/js/common.js';
export default {
  name: 'Major',
  data() {
    return {
        weather:'',
        circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
        opend:'',
        date:"-",
        time:"-",
        timer:'',
        active:'',
        navs:[],
        imgs:['../assets/img/1.png','../assets/img/1.png','../assets/img/1.png','../assets/img/1.png'],
    };
  },
  components: {
  },
  mounted() {
    this.timer = setInterval(this.flush, 1000);
    this.searchNav();
    this.getWeather();
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
  computed:{
    breadName : function(){

      return this.$store.state.position;
    },
    hasLogin :function(){
      return this.getLoginState();
    },
    content:function(){
      return this.$store.state.title;
    },
    icon:function(){
      var hour=new Date().getHours();
      if(6<hour && hour<18)
        return "el-icon-sunny";
      else
        return "el-icon-moon";
    },
    tip:()=>{
      var hour=new Date().getHours();
      if(6<=hour && hour<=18)
        return "今天又是充满希望的一天！";
      else if(18<hour && hour<=22)
        return "晚上好，适合学习的时间！";
      else
        return "深夜了，我们还在努力着！";
    }
  },
  methods: {
    getWeather(){
      this.$axios.get('http://localhost:777/city/101040100')
     .then(resp=>{
       if(resp.data.status==200){
         this.weather=resp.data.obj;
         if(!resp.data.obj){
           this.$axios.get('http://47.107.138.4/api/city/101040100')
           .then(resp=>{
             if(resp.data.status==200){
               this.weather=resp.data.obj;
             }
            })
         }
       }
     })
    },
    searchNav(){
      var listParent = this.$router.options.routes
      this.navs=listParent[0].children;
    },
    handleSelect(key, keyPath) {
      this.$router.push(key)
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },

    flush() {//刷新时间
       this.date=getDate();
       this.time=getTime();
    },
    getLoginState(){
      return this.$store.state.hasLogin;
    },
    showlogin(){
      if(!this.getLoginState())
        this.$router.push('/login')
    },
    logout(){
      this.postRequest('/logout');
      this.$store.commit("logout");
      this.$notify({
                title: '已注销',
                type: 'success',
                duration:2500,
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .home-container {
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
  }
  .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      /* line-height: 300px; */
      margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
</style>
